<template>
  <div class="big-screen-header">
    <div class="header-left">
      <div class="point-area">
        <span class="point"></span>
        <span class="point"></span>
      </div>
      <div class="page-title">
        <span class="margin-left-20">
          {{pageTitle}}
        </span>
      </div>
      <!-- <span class="arrow-right"></span> -->
      <div class="rect-area">
        <div class="rect rect-bg-color1"></div>
        <div class="rect rect-bg-color2"></div>
        <div class="rect rect-bg-color3"></div>
      </div>
    </div>
    <div class="header-center">
      <div class="points-left">
        <span class="point point1"></span>
        <span class="point point2"></span>
        <span class="point point3"></span>
        <span class="point point4"></span>
      </div>
      <div class="big-screen-title">{{title}}</div>
      <div class="points-right">
        <span class="point point4"></span>
        <span class="point point3"></span>
        <span class="point point2"></span>
        <span class="point point1"></span>
      </div>
    </div>
    <div class="header-right">
      <div class="rect-area">
        <div class="rect rect-bg-color3"></div>
        <div class="rect rect-bg-color2"></div>
        <div class="rect rect-bg-color1"></div>
      </div>
      <div class="page-title">{{currentTime}}</div>
      <!-- <span class="arrow-right"></span> -->
      <div class="point-area">
        <span class="point"></span>
        <span class="point"></span>
      </div>
    </div>
  </div>
</template>

<script>
import { dateFormat } from '@/utils'
export default {
  props: {
    pageTitle: '',
    title: {
      type: String,
      default: '智慧园区IOC'
    }
  },
  data () {
    return {
      currentTime: ''
    }
  },
  mounted () {
    this.getCurrentTime()
  },
  methods: {
    getCurrentTime () {
      this.currentTime = dateFormat('YYYY-mm-dd HH:MM:SS', new Date())
      requestAnimationFrame(this.getCurrentTime)
    }
  }
}
</script>

<style lang="scss" scoped>
.big-screen-header {
  color: #00cbff;
  position: relative;
  font-weight: bold;
  position: relative;
  z-index: 9;
  .header-left {
    left: 28px;
    background-image: url('~@/assets/img/trapezoid-border-left1.png');
    .point-area {
      margin-left: 4px;
    }
    .page-title {
      margin-left: 22px;
      font-size: 18px;
    }
    .rect-area {
      margin-left: 154px;
      .rect {
        transform: skewX(64deg);
      }
    }
  }
  .header-center {
    display: flex;
    position: absolute;
    left: 386px;
    width: 1126px;
    height: 94px;
    background-size: 100%;
    background-image: url('~@/assets/img/big-screen-header-bg.png');
    .points-left, .points-right {
      margin-top: 16px;
      height: 12px;
      display: flex;
      align-items: center;
      .point {
        display: inline-block;
        border-radius: 50%;
        margin-right: 15px;
      }
      .point1 {
        width: 6px;
        height: 6px;
        background: #055A7B;
      }
      .point2 {
        width:8px;
        height: 8px;
        background: #065B7C;
      }
      .point3 {
        width: 10px;
        height: 10px;
        background: #047FA8;
      }
      .point4 {
        width: 12px;
        height: 12px;
        background: #02A3D4;
      }
    }
    .points-left {
      margin-left: 144px;
    }
    .points-right {
      margin-left: 274px;
    }
    .big-screen-title {
      color: #23CEFD;
      display: flex;
      height: 75px;
      font-size: 36px;
      line-height: 75px;
      margin-left: 215px;
      align-items: center;
    }
  }
  .header-right {
    left: 1484px;
    background-image: url('~@/assets/img/trapezoid-border-right1.png');
    .point-area {
      margin-left: 68px;
    }
    .rect-area {
      margin-left: 58px;
      .rect {
        transform: skewX(-64deg);
      }
    }
  }
  .header-left, .header-right {
    display: flex;
    position: absolute;
    top: 12px;
    width: 404px;
    height: 30px;
    align-items: center;
    .point-area {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .point {
        display: inline-block;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: #055A7B;
      }
    }
    .page-title {
      margin-left: 22px;
      font-size: 18px;
    }
    .rect-area {
      display: flex;
      .rect {
        width: 12px;
        height: 17px;
        margin-right: 15px;
      }
      .rect-bg-color1 {
        background: #007A99;
      }
      .rect-bg-color2 {
        background: #00A2CC;
      }
      .rect-bg-color3 {
        background: #00CBFF;
      }
    }
  }
}
</style>
